import 'dart:async';
import 'package:flutter/material.dart';
import 'package:ichinesereader/models/report/classskillchartdata.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import '../../constants.dart';
import 'package:get/get.dart';

import '../../themes/pageStyles.dart';

/// Renders the line sample with dynamically updated data points.
class AnimationClassSkillWidget extends StatefulWidget {
  /// Renders the line chart sample with dynamically updated data points.
  const AnimationClassSkillWidget(
      {Key? key,
      required this.skillchartData,
      this.title = "Current Class Reading Comprehensive Skills"})
      : super(key: key);
  final List<List<ClassSkillChartData>> skillchartData;
  final String title;

  @override
  _AnimationClassSkillWidget createState() => _AnimationClassSkillWidget();
}

class _AnimationClassSkillWidget extends State<AnimationClassSkillWidget> {
  Timer? _timer;
  int index = 0;
  List<ClassSkillChartData>? _chartData;
  TooltipBehavior _tooltipbehavior = TooltipBehavior(enable: true);
  final PageStyles _pageStyles = PageStyles();

  @override
  Widget build(BuildContext context) {
    _getChartData(index);
    _timer = Timer(const Duration(seconds: 3), () {
      int newIndex = index + 1;
      if (newIndex >= widget.skillchartData.length) {
        newIndex = 0;
      }
      setState(() {
        index = newIndex;
        _getChartData(newIndex);
      });
    });

    return _buildAnimationBarChart();
  }

  ///Get the cartesian chart with line series
  Container _buildAnimationBarChart() {
    final isSmallScreen =
        MediaQuery.of(context).size.width < Constants.DefinedScreenSmallSize;
    return Container(
      decoration: _pageStyles.dataGridBackground(),
      child: Container(
        decoration: _pageStyles.dataGridForground(),
        margin: EdgeInsets.all(12.0),
        child: SfCartesianChart(
            title: ChartTitle(
              text: widget.title.tr,
              textStyle: isSmallScreen
                  ? TextStyle(
                      fontSize: 12.0,
                      color: Get.isDarkMode ? Colors.white : Colors.black,
                      fontFamily: 'Montserrat')
                  : TextStyle(
                      fontSize: 15.0,
                      color: Get.isDarkMode ? Colors.white : Colors.black,
                      fontFamily: 'Montserrat'),
            ),
            plotAreaBorderWidth: 0,
            tooltipBehavior: _tooltipbehavior,
            primaryXAxis: CategoryAxis(
                labelStyle: TextStyle(fontFamily: 'Montserrat'),
                majorGridLines: const MajorGridLines(width: 0),
                labelIntersectAction: AxisLabelIntersectAction.multipleRows),
            primaryYAxis: NumericAxis(
                labelStyle: TextStyle(fontFamily: 'Montserrat'),
                majorTickLines: const MajorTickLines(color: Colors.transparent),
                axisLine: const AxisLine(width: 0),
                minimum: 0,
                maximum: 100),
            series: _getDefaultBarSeries()),
      ),
    );
  }

  /// The method returns line series to chart.
  List<ColumnSeries<ClassSkillChartData, String>> _getDefaultBarSeries() {
    return <ColumnSeries<ClassSkillChartData, String>>[
      ColumnSeries<ClassSkillChartData, String>(
        dataSource: _chartData!,
        xValueMapper: (ClassSkillChartData sales, _) => sales.skill,
        yValueMapper: (ClassSkillChartData sales, _) => sales.value,
      )
    ];
  }

  @override
  void dispose() {
    super.dispose();
    _timer?.cancel();
    _chartData!.clear();
  }

  void _getChartData(i) {
    _chartData = widget.skillchartData[i];
    _timer?.cancel();
  }
}
